<template>
  <div id="login">
    <el-form
      v-loading.fullscreen.lock="loading"
      element-loading-text="正在登录中ing..."
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="40px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="account">
        <el-input type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="pic_code" label-width="160px">
        <img alt="加载失败" :src="pic_code_url" class="p_code" @click="re_pic_code" />
        <el-input type="text" v-model="ruleForm.pic_code" autocomplete="off"></el-input>
      </el-form-item>

      <div class="go_reg">
        <span @click="go_register()">注册管理员>>></span>
      </div>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { post_login } from "../api/account";
export default {
  name: "register",
  data() {
    //账号格式验证
    var validate_account = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账户"));
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error("长度应为6~12位!"));
      } else {
        callback();
      }
    };
    // 密码验证
    var validate_pass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error("长度应为6~12位!"));
      } else {
        callback();
      }
    };
    //验证码验证
    var validate_pic_code = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value.length !== 4) {
        callback(new Error("长度应为4位!"));
      } else {
        callback();
      }
    };
    //验证码验证
    return {
      pic_code_url: "http://127.0.0.1/school_big/api/yzm.jfif",
      loading: false,
      ruleForm: {
        pass: "",
        account: "",
        pic_code: ""
      },
      rules: {
        pass: [{ validator: validate_pass, trigger: "blur" }],
        account: [{ validator: validate_account, trigger: "blur" }],
        pic_code: [{ validator: validate_pic_code, trigger: "blur" }]
      }
    };
  },
  methods: {
    //登录
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          this.loading = true;
          post_login({ ...this.ruleForm })
            .then(res => {
              if (res.status === 1) {
                const { id, nickname, isAdmin, token, img_url } = res.data;
                this.$store.commit( "account/set_info", {
                  id,
                  nickname,
                  isAdmin,
                  token,
                  img_url
                });

                localStorage.setItem("id", id);
                localStorage.setItem("nickname", nickname);
                localStorage.setItem("isAdmin", isAdmin);
                localStorage.setItem("JWT_Authorization", token);
                localStorage.setItem("img_url", img_url);

                this.$router.push("/home");
              } else {
                this.open("用户名或密码错误");
              }
            })
            .catch(() => {
              this.open("网络出现错误，请稍后再试");
            })
            .finally(() => {
              this.loading = false;
            });
          this.$router.push("/home");
        } else {
          // console.log("error submit!!");
          alert("error submit!!");
          return false;
        }
      });
    },
    // 刷新验证码
    re_pic_code() {
      console.log("刷新验证码");
    },
    //去注册界面
    go_register() {
      this.$router.push("register");
    }
  }
  // created() {
  //   this.re_pic_code();
  // }
};
</script>

<style lang="less">
#login {
  padding: 0px 20px 10px;
  .go_reg {
    height: 20px;
    color: rgb(148, 148, 148);
    font-size: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    > span {
      float: right;
      transition: all 0.3s;
      &:hover {
        color: rgb(16, 137, 236);
      }
    }
  }
  .el-input__suffix {
    color: rgb(51, 216, 10);
  }
  .el-form-item__content {
    position: relative;
    text-align: center;
    margin-left: 0px;
    > .p_code {
      cursor: pointer;
      top: 4px;
      left: -160px;
      width: 100px;
      height: 36px;
      position: absolute;
    }
    .el-button {
      padding: 12px 70px;
      transform: translateX(-10%);
      font-size: 18px;
      border-radius: 8px;
      font-family: "楷体";
    }
  }
}
</style>